<template>
  <li class="wait-order">
    <div class="title">
      <div class="left">
        <img src="	https://image-mall.gxptkc.com/m/resources/goods_detail/store_logo.png" alt="" />
        <p>快车超市电商交易平台</p>
      </div>
      <div class="right" v-cloak>
        <span v-if="surplusTime / 1000 >= 0 && waitPayOrder.find(o => o.paySn == item.paySn)">剩余付款时间：{{ time
        }}</span>
        <span v-else :style="{ color: '#ccc' }">已过期</span>
      </div>
    </div>
    <ul class="order">
      <li v-for="(good, index) in item.goodsInfo" :key="index" @click="
        $router.push({
          path: '/product',
          query: { goodsId: good.goodsId, productId: good.productId },
        })
      ">
        <img :src="good.image" alt="" />
        <div class="right">
          <p>{{ good.goodsName }}</p>
          <span>￥{{ good.price.toFixed(2) }}*{{ good.buyNum }}</span>
          <span>{{ good.specValues }}</span>
        </div>
      </li>
    </ul>
    <div class="total">
      <div class="price">
        <span>共{{ item.goodsInfo?.length }}件商品</span>
        <span>合计：</span>
        <span>￥{{ item.total }}</span>
      </div>
      <div class="my-action">
        <!-- <span>修改地址</span> -->
        <span @click="waitPayToCancelOrToPay(item, 'calcel')">取消订单</span>
        <span @click="waitPayToCancelOrToPay(item, 'pay')" v-if="surplusTime >= 0">立即付款</span>
      </div>
    </div>
  </li>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { Dialog, Toast } from "vant";
export default {
  props: ["item"],
  data() {
    return {
      time: 0,
      surplusTime: -1,
      waitPayOrder: [],
    };
  },
  computed: {
    ...mapState(["orderType", "orderGoods"]),
  },
  created() {
    this.computedTime();
    this.waitPayOrder = JSON.parse(localStorage.getItem("wait-pay"));

    this.$once("hook:beforeDestroy", () => {
      clearInterval(this.waitPayTime);
    })
  },
  watch: {
    surplusTime(newVal) {
      let m = 0;
      let s = 0;
      m = Math.floor(newVal / 1000 / 60);
      s = Math.floor((newVal / 1000) % 60);
      m = m >= 10 ? m : "0" + m;
      s = s >= 10 ? s : "0" + s;
      this.time = `${m}分${s}秒`;
    },
    orderGoods: {
      handler(newVal) {
        newVal;
        clearInterval(this.waitPayTime)
        this.computedTime()
      },
      deep: true,
    }
  },
  beforeDestroy() {
    //组件销毁清除定时器
    clearInterval(this.waitPayTime);
  },
  methods: {
    ...mapMutations(["changeOrderType", "changeOrderGoods"]),
    computedTime() {
      let all = this.item.practiceStamp + 2 * 60 * 1000;
      let now = new Date().getTime();
      this.surplusTime = all - now;

      if (this.surplusTime / 1000 >= 0) {
        this.waitPayTime = setInterval(() => {
          now = new Date().getTime();
          this.surplusTime = all - now;

          if (this.surplusTime / 1000 <= 0) {
            clearInterval(this.waitPayTime);
          }
        }, 1000);
      }
    },

    //删除一个待付款商品函数
    waitPayToCancle(item) {
      let currentOrder = JSON.parse(localStorage.getItem("wait-pay"));
      currentOrder = currentOrder.filter((o) => o.paySn != item.paySn);
      localStorage.setItem("wait-pay", JSON.stringify(currentOrder));

      //方案一 的回跳
      // this.changeOrderType("");

      //方案二 不进行回跳，只将支付后的商品不展示
      console.log(this.orderType);
      if (this.orderType == '') {  //如果此时是全部
        let waitSendOnder = JSON.parse(localStorage.getItem("confirm-pay"));
        this.changeOrderGoods({
          waitPay: currentOrder,
          waitSend: waitSendOnder,
        });
      } else {
        this.changeOrderGoods({
          waitPay: currentOrder,
          waitSend: "",
        });
      }


    },



    //待付款商品的取消和支付函数
    waitPayToCancelOrToPay(item, type) {
      //取消订单和支付订单都需要清除定时器
      clearInterval(this.waitPayTime)
      if (type == "pay") {
        //去支付
        Dialog.confirm({
          title: "支付订单",
          message: "是否确认支付订单",
        })
          .then(() => {
            //在待付款列表删除该数据
            this.waitPayToCancle(item);
            //在待发货列表添加该数据
            let currentConfirmPayOrder = JSON.parse(
              localStorage.getItem("confirm-pay")
            );
            localStorage.setItem(
              "confirm-pay",
              JSON.stringify([item, ...currentConfirmPayOrder])
            );

            //支付结束后操作

            //方案一修改为支付订单之后跳到待发货
            // this.changeOrderType("waitSend");

            Toast.success("支付订单成功！");
          })
          .catch(() => { });
      } else {
        //去删除
        Dialog.confirm({
          title: "取消订单",
          message: "是否确认取消订单",
        })
          .then(() => {
            this.waitPayToCancle(item);
            Toast.success("取消订单成功！");
          })
          .catch(() => { });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
li {
  background-color: #fff;
  font-size: 13rem;
  margin-bottom: 10rem;
  padding-left: 10rem;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rem 0;
    padding-right: 10rem;
    border-bottom: 1px solid #eee;

    .left {
      display: flex;
      justify-content: left;
      align-items: center;

      img {
        width: 15rem;
        height: 14rem;
      }

      p {
        color: #2d2d2d;
        margin-left: 5rem;
      }
    }

    span {
      color: #fc1c1c;
    }
  }

  ul.order {
    >li {
      display: flex;
      // margin-bottom: 10rem;
      padding: 10rem 0;
      border-bottom: 1px solid #eee;

      img {
        width: 100rem;
        height: 100rem;
        border-radius: 10rem;
      }

      .right {
        margin-left: 10rem;
        display: flex;
        flex-direction: column;
        padding-right: 10rem;

        p {
          font-size: 14rem;
          color: #2d2d2d;
          line-height: 1.5em;
        }

        span {
          color: #949494;

          &:last-child {
            font-size: 16rem;
            color: #2d2d2d;
          }
        }
      }
    }
  }

  .total {
    text-align: right;
    padding: 15rem 10rem;

    .price {
      span {
        color: #949494;

        &:nth-child(2) {
          color: #333;
          margin-left: 10rem;
        }

        &:last-child {
          font-size: 16rem;
          color: #2d2d2d;
        }
      }
    }

    .my-action {
      margin-top: 10rem;

      span {
        padding: 5rem;
        border-radius: 20rem;
        border: 1rem solid #eee;
        margin: 0 7rem;

        &:last-child {
          color: #fff;
          background-color: #fc1c1c;
          border: none;
        }
      }
    }
  }
}
</style>